<template>
  <div class="demo">
    <template>
      <div v-if="mode === 'edit'">
        <div v-if="menuList && menuList.length > 0">
          <el-menu
            :default-active="activeIndex2"
            :mode="menuMode?'vertical':'horizontal'"
            :background-color="menuBgColor"
            :text-color="menuColor"
            :active-text-color="menuActiveColor"
          >
            <el-menu-item
              :index="index"
              v-for="(item, index) in menuList"
              :key="item"
              >{{ item.label }}</el-menu-item
            >
          </el-menu>
        </div>
        <div v-else>
          <el-menu
            :default-active="activeIndex2"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-menu-item index="2">处理中心</el-menu-item>
            <el-menu-item index="3">处理中心</el-menu-item>
            <el-menu-item index="4">处理中心</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div v-else>{{ value }}</div>
    </template>
  </div>
</template>

<script>
import datasource from "../../mixins/steps-datasource";
export default {
  name: "navMenu",
  mixins: [datasource],
  components: {},
  props: {
    value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    menuMode: {
      type: Boolean,
      default: false,
    },
    menuBgColor: {
      default: "",
    },
    menuColor: {
      default: "",
    },
    menuActiveColor: {
      default: "",
    },
  },
  data() {
    return {
      activeIndex2: "1",
      menuMode: false,
      menuBgColor: "#545c64",
      menuColor: "#fff",
      menuActiveColor: "#ffd04b",
      menuList: []
    };
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        // if (val && val.length) {
          console.log(val,'===val')
          this.menuList = val
        // }
      }
    },
  },
  mounted() {
    // if (this.value) {
    //   this.phoneNum = this.value;
    //   if (this.mode == "view") {
    //     this.disabled = true;
    //   }
    // }
  },
  computed: {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
}
</style>
